/**
 * Created by Hannah on 2017/7/19.
 */
//npm i -g jquery 添加jquery依赖
import React from 'react';
import {Link} from 'react-router';
import {Button, Input, Modal, Select} from 'antd';
import {Icon} from 'antd';
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
import BaseButton from '../BaseComponent/BaseButton';
require("./Home.css");
import $ from "jquery";
const Option = Select.Option;

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem("userStorage"));
        if (userSessionStorage == null) {
            this.state = {
                visible: false,
                id: "",
                password: "",
                profession: "",
                confirmLoading: false,
                button_display: "block",
                text_display: "none"
            };
        } else {
            this.state = {
                visible: false,
                password: "",
                profession: "",
                confirmLoading: false,
                id: userSessionStorage.data.id,
                button_display: "none",
                text_display: "block"
            };
        }

    }

    showModal = () => {
        this.setState({
            visible: true
        });
    };

    handleCancel = (e) => {
        this.setState({
            visible: false
        })
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.setState({
            confirmLoading: true
        });
        $.ajax({
            type: "POST",
            url: "http://123.207.214.129:9090/LanOu/register",
            data: {
                id: this.state.id,
                password: this.state.password,
                profession: this.state.profession.label
            },
            dataType: "json",
            success: (data) => {
                this.cancelModal(data)
            },
            error: function (e) {
                console.log(e);
            }
        });
    };

    cancelModal = (data) => {
        this.setState({
            visible: false,
            confirmLoading: false
        });
    };

    render() {
        return (
            <div className="home">
                <div className="header">
                    <p style={{paddingTop: 7 + 'px'}}>
                        <img className="logo" src="../images/logo.png"/>

                        <Link to="/" >
                            <BaseButton buttonType="default"
                                        buttonSize="small"
                                        border="none"
                                        buttonWidth="5%"
                                        fontSize="1em"
                                        textColor="#65a2ff"
                                        backgroundColor="white"
                                        buttonText="首页"/>
                        </Link>

                        <Link to="/NewsConsult" >
                            <BaseButton buttonSize="small"
                                        border="none"
                                        fontSize="1em"
                                        buttonWidth="10%"
                                        backgroundColor="white"
                                        buttonText="新闻咨询"/>
                        </Link>

                        <BaseButton buttonSize="small"
                                    position="absolute"
                                    buttonWidth="4.5rem"
                                    left="50%"
                                    buttonMarginLeft="15.8rem"
                                    textColor="#65a2ff"
                                    buttonText="注册"
                                    top="1rem"
                                    display={this.state.button_display}
                                    buttonFunction={this.showModal}/>
                        <p style={{ display: this.state.text_display,
                                    position:'absolute',
                                    marginLeft:'13rem',
                                    left:'50%',
                                    top:'1rem'}}>
                            欢迎你，
                        </p>

                        <Link to="/SignIn">
                            <BaseButton buttonSize="small"
                                        position="absolute"
                                        left="50%"
                                        buttonType="primary"
                                        buttonMarginLeft="21rem"
                                        buttonWidth="4.5rem"
                                        top="1rem"
                                        display={this.state.button_display}
                                        backgroundColor="#65a2ff"
                                        buttonText="登陆"/>
                        </Link>

                        <Link to={{pathname: '/Main', state: this.state.id}}>
                            <p style={{ display: this.state.text_display,
                                        position:'absolute',
                                        marginLeft:'15.9rem',
                                        left:'50%',
                                        top:'1rem'}}>
                                {this.state.id}
                            </p>
                        </Link>

                        <BaseButton buttonSize="small"
                                    buttonType="primary"
                                    position="absolute"
                                    left="50%"
                                    buttonMarginLeft="21rem"
                                    buttonWidth="4.5rem"
                                    top="1rem"
                                    backgroundColor="#65a2ff"
                                    buttonText="注销"
                                    display={this.state.text_display}
                                    buttonFunction={() => {
                                        window.sessionStorage.clear();
                                        this.setState({
                                            visible: false,
                                            id: "",
                                            password: "",
                                            profession: "",
                                            confirmLoading: false,
                                            button_display: "block",
                                            text_display: "none"
                                        })
                                    }}/>
                    </p>
                    <form onSubmit={(e) => this.handleSubmit(e)}>
                        <Modal
                            title="注册"
                            wrapClassName="vertical-center-modal"
                            visible={this.state.visible}
                            onOk={(e) => this.handleSubmit(e)}
                            confirmLoading={this.state.confirmLoading}
                            onCancel={this.handleCancel}
                            okText="注册"
                            width="400px">
                            <p>
                                <Input placeholder="用户名"
                                       size="large"
                                       onChange={(e) => {
                                           this.setState({id: e.target.value})
                                       }}
                                       prefix={<Icon type="user"/>}
                                />
                            </p>

                            <p>
                                <Input placeholder="密码"
                                       type="password"
                                       style={{marginTop: 10}}
                                       size="large"
                                       onChange={(e) => {
                                           this.setState({
                                               password: e.target.value
                                           })
                                       }}
                                       prefix={<Icon type="lock"/>}
                                />
                            </p>

                            <p>
                                <Select labelInValue defaultvalue="JavaEngineer" style={{width: 120, marginTop: 10}}
                                        onChange={(value) => {
                                            this.setState({
                                                profession: value
                                            })
                                        }
                                        }>
                                    <Option value="JavaEngineer">Java工程师</Option>
                                    <Option value="WebEngineer">Web前端工程师</Option>
                                </Select>
                            </p>
                        </Modal>
                    </form>
                </div>


                <div className="second">
                    <p className="second_line_info">
                        <span className="second_first_line">丰富的题库资源、详细的题目解答</span>
                    </p>

                    <p>
                        <h1 className="second_second_line">尽在鸥课题库</h1>
                    </p>

                    <p className="second_third_line">包含Java、JavaScript、JQuery等题目</p>

                    <p >
                        <Button size="large" className="second_button">点击加入我们 </Button>
                    </p>


                </div>

                <div className="middle">


                </div>

                <div className="third">
                    <p>
                        <h1 className="third_title">为IT行业从事者提供多方面的试题</h1>
                    </p>

                    <p>
                        <div className="third_div">
                            <h2>Java基础</h2>
                            <p>各种xxxxxx</p>
                            <p>
                                <Link to="/Question"><Button type="default" className="third_div_button"> <Icon
                                    type="right-circle-o"
                                    style={{color: '#69a9f3'}}/>去
                                    考 试</Button>
                                </Link>
                            </p>
                        </div>

                        <div className="third_div">
                            <h2>Java基础</h2>
                            <p>各种xxxxxx</p>
                            <p>
                                <Button type="default" className="third_div_button"> <Icon type="right-circle-o"
                                                                                           style={{color: '#69a9f3'}}/>去
                                    考 试</Button>
                            </p>
                        </div>

                        <div className="third_div">
                            <h2>Java基础</h2>
                            <p>各种xxxxxx</p>
                            <p>
                                <Button type="default" className="third_div_button"> <Icon type="right-circle-o"
                                                                                           style={{color: '#69a9f3'}}/>去
                                    考 试</Button>
                            </p>
                        </div>
                    </p>
                </div>

                <div>
                    <img className="forth_img" src="../images/part4.png"/>
                </div>

                <div className="fifth">
                    <h1 className="fifth_first_div">
                        一切只为你更科学的成长
                    </h1>

                    <div style={{paddingTop: 40 + 'px'}}>
                        <div className="fifth_second_div">
                            <p className="fifth_second_div_first_line_font">
                                <img className="logo" src="../images/logo2.png"/>
                            </p>

                            <p className="fifth_second_div_second_line_font">
                                鸥课考评是一个关注IT教育课程考试考评的系统xxxxxx
                            </p>
                        </div>

                        <Button type="default" className="fifth_second_div_button">点击加入我们</Button>
                    </div>

                    <hr className="fifth_hr"/>

                    <p>
                        <button className="fifth_third_div_buttons">帮助中心</button>
                        <button className="fifth_third_div_buttons">关于我们</button>
                        <button className="fifth_third_div_buttons">版权声明</button>
                        <button className="fifth_third_div_buttons">免责声明</button>
                    </p>

                    <p className="fifth_final_div_font">
                        xxxxxxx备案号xxxxxxx
                    </p>

                    <p className="fifth_final_div_font">
                        xxxxxxx时间+地址xxxxxxx
                    </p>
                </div>
            </div>




        );
    };
}